<template>
    <div id='ChannelStatisticsView'>
        <!--渠道统计 -->
        <div class="header">
            <div class="header-list">
                <span>
                  查询时间:
                </span>
                <el-date-picker
                v-model="value1"
                type="daterange"
                @change="pickTime"
                range-separator="至"
                format="yyyy-MM-dd"
                start-placeholder="开始日期"
                value-format="yyyy-MM-dd"
                end-placeholder="结束日期">
              </el-date-picker>
            </div>
            <div class="header-list ml20 header-list1">
                <span>
                  渠道号:
                </span>
                <el-input
                placeholder="请输入内容"
                v-model="input1"
                clearable>
              </el-input>

            </div>
            <div class="ml20 header-list2" @click="search">
                <el-button type="primary">搜索</el-button>
            </div>
        </div>
        <div class="content">
          <loading v-show="isLoading"></loading>
          <div class="main" v-show="!isLoading">
              <!-- 数据渲染tab  start -->
            <el-table
              :data="tableData"
              stripe
              :summary-method="getSummaries"
              show-summary
              style="width: 100%">
              <el-table-column
                label="序号"
                width="56"

                type="index">
              </el-table-column>
              <el-table-column
                prop="channel"
                align="center"
                label="渠道商">
              </el-table-column>
              <el-table-column
                prop="enrollment"
                align="center"
                label="注册数">
              </el-table-column>
              <el-table-column
                prop="applications"
                align="center"
                label="申请人数">
              </el-table-column>
              <el-table-column
                prop="applyCount"
                align="center"
                label="申请笔数">
              </el-table-column>
              <el-table-column
                prop="lendPersons"
                align="center"
                label="放款人数">
              </el-table-column>
              <el-table-column
                prop="lendCount"
                align="center"
                label="放款笔数">
              </el-table-column>
              <el-table-column
                prop="loanAmount"
                align="center"
                label="借款总金额">
              </el-table-column>
              <el-table-column
                prop="lendAmount"
                align="center"
                label="放款总金额">
              </el-table-column>
              <el-table-column
                prop="pass"
                align="center"
                label="通过数/通过率">
              </el-table-column>
              <el-table-column
                prop="reject"
                align="center"
                label="拒绝数/拒绝率">
              </el-table-column>
              <el-table-column
                prop="overdueCount"
                align="center"
                label="逾期数">
              </el-table-column>
              <el-table-column
                prop="firstLoanCount"
                align="center"
                label="首贷数">
              </el-table-column>
              <el-table-column
                prop="firstLoanAmount"
                align="center"
                label="首贷总额">
              </el-table-column>
              <el-table-column
                prop="extendLoanCount"
                align="center"
                label="续贷数">
              </el-table-column>
              <el-table-column
                prop="extendLoanAmount"
                align="center"
                label="续贷总额">
              </el-table-column>
              <!-- <el-table-column
                prop="dnow"
                align="center"
                label="借款总次数">
              </el-table-column> -->

            </el-table>
            <!-- <ul class="nav">
              <span style="float:left;width:40px;">汇总</span>
              <li v-for="every in summaryArr">{{every.value}}</li>
            </ul> -->
                <!-- 数据渲染tab  end -->
            <el-pagination
              class="pagat"
              @current-change="handleCurrentChange"
              :current-page="currentPage3"
              background
              :page-count="5"
              :page-size="10"
              layout="total, prev, pager, next, jumper"
              :total="total">
            </el-pagination>
          </div>
          
        </div>
    </div>
</template>
<script>
import  { mapGetters, mapActions }  from 'vuex'
import Storage from '../utils/storage'
import loading from '../components/Loading.vue'
import { channelApi }from '../api/api'
import moment from 'moment'
export default{
     components:{
        loading,
    },
    data(){
        return{
            value1:"",
            input1:"",
            lendTimeFrom:"",
            lendTimeTo:"",
            tableData:[],
            pageIndex:1,
            total:1,
            currentPage3:1,
            totalMap:null,
            mapArr:[],
            summaryArr:[],
            isLoading:false,
        }
    },
    methods:{
      ...mapActions([
                'setSessionId'
            ]),

        handleCurrentChange(val){
            console.log(`当前页: ${val}`);
            this.pageIndex=val;
            this.init();
        },
        dateFormat1:function(row, column) { 
          var date = row[column.property]; 
           if (date == undefined) { 
             return "--"; 
           } 
           return moment(date).format("YYYY-MM-DD"); 
        }, 
        formatter(row, column, cellValue, index){
            return moment(cellValue).format("YYYY.MM.DD")
        },
        search(){
            this.pageIndex=1
            this.init();
        },
        pickTime(data){
            console.log(data)
            if(data){
              this.lendTimeFrom=data[0]
              this.lendTimeTo=data[1]
            }else{
               this.lendTimeFrom=""
              this.lendTimeTo=""
            }
            
        },
        getSummaries(){
          return this.summaryArr;
            //return this.summaryArr
        },
        compare(value1, currentValue){
          return value1 - currentValue;
        },
        //初始化数据
        init(){
          let msg={
            pageIndex:this.pageIndex,
            pageSize:10,
            startTime:this.lendTimeFrom,
            endTime:this.lendTimeTo,
            channel:this.input1,
          }
          this.isLoading=true;
           channelApi.channelGetChannelReportList(msg)
            .then(result =>{
                //console.log(result)
                this.total=result.page.totalRow
                this.tableData=result.page.list
                this.totalMap=result.totalMap
                this.isLoading=false
                let arr=[];
                for(var item in (this.totalMap)){
                  let obj={};
                    switch(item){
                      case "totalEnrollment":
                      obj.value=this.totalMap[item];
                      obj.id=1;
                      arr.push(obj)
                      break;
                      case "totalApplications":
                      obj.value=this.totalMap[item];
                      obj.id=2;
                      arr.push(obj)
                      break;
                      case "totalApplyCount":
                      obj.value=this.totalMap[item];
                      obj.id=3;
                      arr.push(obj)
                      break;
                      case "totalLendPersons":
                      obj.value=this.totalMap[item];
                      obj.id=4;
                      arr.push(obj)
                      break;
                      case "totalLendCount":
                      obj.value=this.totalMap[item];
                      obj.id=5;
                      arr.push(obj)
                      break;
                      case "totalLoanAmount":
                      obj.value=this.totalMap[item];
                      obj.id=6;
                      arr.push(obj)
                      break;
                      case "totalLendAmount":
                      obj.value=this.totalMap[item];
                      obj.id=7;
                      arr.push(obj)
                      break;
                      case "pass":
                      obj.value=this.totalMap[item];
                      obj.id=8;
                      arr.push(obj)
                      break;
                      case "reject":
                      obj.value=this.totalMap[item];
                      obj.id=9;
                      arr.push(obj)
                      break;
                      case "overdueCount":
                      obj.value=this.totalMap[item];
                      obj.id=10;
                      arr.push(obj)
                      break;
                      case "firstLoanCount":
                      obj.value=this.totalMap[item];
                      obj.id=11;
                      arr.push(obj)
                      break;
                      case "firstLoanAmount":
                      obj.value=this.totalMap[item];
                      obj.id=12;
                      arr.push(obj)
                      break;
                      case "extendLoanCount":
                      obj.value=this.totalMap[item];
                      obj.id=13;
                      arr.push(obj)
                      break;
                      case "extendLoanAmount":
                      obj.value=this.totalMap[item];
                      obj.id=14;
                      arr.push(obj)
                      break;
                    }
                }
                this.mapArr=arr;

                let arr1=[],valueArr=[];
                for(var i=0;i<this.mapArr.length;i++){
                    arr1.push(this.mapArr[i].id)
                }
                let sortArr=arr1.sort(this.compare)
                for(var d = 0;d<sortArr.length;d++){
                    for(var h = 0;h<this.mapArr.length;h++){
                       if(this.mapArr[h].id==sortArr[d]){
                          valueArr.push(this.mapArr[h])
                       }
                    }
                }
                valueArr.unshift({
                  value:"--"
                })
                valueArr.unshift({
                  value:"汇总"
                })
                 this.summaryArr=[]
                for(var s = 0;s<valueArr.length;s++){
                  if((typeof valueArr[s].value)=="string"){

                    this.summaryArr.push(Number(valueArr[s].value))
                  }else{
                     console.log(valueArr[s].value)
                      this.summaryArr.push(valueArr[s].value)
                  }
                }
                for(var p = 0;p<this.summaryArr.length;p++){
                  if(p==0){
                    this.summaryArr[p]="汇总"
                  }
                  if(p==1){
                    this.summaryArr[p]="--"
                  }
                  if(p==9){
                    this.summaryArr[p]=result.totalMap.pass
                  }
                  if(p==10){
                    this.summaryArr[p]=result.totalMap.reject
                  }
                }
            })
            .catch(error => {
                console.error(error)
                this.isLoading=false
            })
        },
        
    },
    mounted(){
      this.session=Storage.get('51SjdAdmin_sessionId')
      
    },
    created(){
        this.init();
    },
}
</script>
<style>
    #ChannelStatisticsView .header-list1 .el-input__inner{
        height: 44px;
        width: 194px;
    }
    #ChannelStatisticsView .header-list1 .el-input{
        height: 44px;
        width: 194px;
    }
    #ChannelStatisticsView .el-table{
        font-size: 14px;
    }
</style>
<style lang="scss" scoped>

@import "../sass/variables";
  #ChannelStatisticsView{
    padding-left:23px;
    padding-top:47px;
    font-weight: normal;
    color:#333;
    .el-input__inner{
      width:280px;
      height:44px;
    }
  }
  .ml20{
    margin-left:20px;
  }
  .header{
    height:44px;
    width:100%;
    min-width: 900px;
    margin-bottom:30px;
  }
  .header-list{
    float: left;
    width: 360px;
    height:44px;
    line-height: 44px;
    span{
      font-size: 16px;
      float: left;
      line-height: 44px;
      margin-right: 10px;
    }
  }
  .header-list1{
    width:260px;
  }
  .header-list2{
    float: left;
    height: 44px;
    .el-button{
      width:140px;
      height:44px;
      line-height: 44px;
      padding:0;
    }
  }
  .content{
    
  }
  .pagat{
    margin-top: 20px;
  }
  .nav{
    width: 100%;
    height:48px;
    line-height: 48px;
    color: #000;
    display: -webkit-box; /* Chrome 4+, Safari 3.1, iOS Safari 3.2+ */
    display: -moz-box; /* Firefox 17- */
    display: -webkit-flex; /* Chrome 21+, Safari 6.1+, iOS Safari 7+, Opera 15/16 */
    display: -moz-flex; /* Firefox 18+ */
    display: -ms-flexbox; /* IE 10 */
    display: flex; 
    font-weight: normal;
    li{
      -webkit-flex: 1;
      flex:auto;
      flex:1; 
      text-align: center;
      float:left;
    }
  }
</style>